* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    background-image: linear-gradient(to left, #f0fdbd, #277d9f);

    .father {
        display: flex;
        padding: 1.667rem 2.083rem 0.833rem 1.667rem;

        .left {
            flex: auto;

            .top {
                span {
                    color: #393d40;
                    padding: 0 5px;
                }

                input {
                    width: 7.5rem;
                    height: 1.667rem;
                    padding-left: 0.125rem;
                    border-radius: 0.125rem;
                    border: none;
                    outline: none;
                }

                button {
                    width: 2.917rem;
                    height: 1.667rem;
                    background-color: #237b9e;
                    border-radius: 3px;
                    border: none;
                    color: #fff;
                }
            }

            table {
                margin-top: 1.25rem;
                border: 1px solid #9ac1be;
                border-collapse: collapse;
                text-align: center;
                border-radius: 5px;

                th {
                    background-color: #5da3a9;
                    border-radius: 0.208rem;
                }

                th,
                td {
                    width: 11.667rem;
                    height: 1.667rem;
                    color: #444449;
                    border-right: 1px solid #9ac1be;
                    border-bottom: 1px solid #9ac1be;
                }


            }
        }

        .right {
            width: 500px;

            h3 {
                color: #444449;
            }

            .line {
                height: 12.5rem;
            }

            .bar {
                height: 12.5rem;
            }
        }
    }

}